<template>
  <!-- 全局文件获取组件 -->
  <div class="fileAccess">
    <!-- 文件获取 -->
    <input
      class="up-input"
      ref="filElem"
      type="file"
      :multiple="fileMaxNumber > 1"
      :accept="accept"
      @change="handleInputChange"
    />
  </div>
</template>
<script>
import QiniuUpload from "@/common/upload";
export default {
  name: "fileAccess",
  props: {},
  data() {
    return {
      fileType: "", // img,audio,video,file
      fileTypeName: "文件",
      accept: "", // 限制上传的文件类型 image/* audio/* video/*等
      suffix: [], // 限制上传的文件后缀
      fileSize: 2 * 1024, // 限制单个上传文件大小(单位kb)
      fileMaxNumber: 9, // 文件上传个数上限
      upload: true, //是否上传
      uploadType: "上传",
      uploadInfo: {},
      uptoken: ""
    };
  },
  created() {
    // 初始化状态
    // 文件类型
    switch (this.fileType) {
      case "img":
        // 获取图片
        this.accept = "image/*";
        this.fileTypeName = "图片";
        break;
      case "audio":
        // 获取音频
        this.accept = "audio/*";
        this.fileTypeName = "音频";
        break;
      case "video":
        // 获取视频
        this.accept = "video/*";
        this.fileTypeName = "视频";
        break;
      default:
        this.fileTypeName = "文件";
        break;
    }
    // 上传状态
    this.uploadType = this.upload ? "上传" : "选择";
  },
  mounted() {
    // 触发文件选择
    this.$refs.filElem.dispatchEvent(new MouseEvent("click"));
  },
  methods: {
    // 文件校验
    fileCheck(files) {
      let check = true;
      // 文件个数校验
      if (files.length > this.fileMaxNumber) {
        this.$toast(`最多只可${this.uploadType}${this.fileMaxNumber}个文件`);
        return false;
      }
      // 多文件校验
      for (let file of files) {
        // 文件名后缀校验
        if (this.suffix.length > 0) {
          let suffix = file.name.split(".")[1];
          // console.log(suffix);
          let suffixChexk;
          for (let suffixName of this.suffix) {
            suffixChexk = false;
            if (suffix == suffixName) {
              suffixChexk = true;
            }
          }
          check = suffixChexk;
          if (!check) {
            let suffixGather = "";
            for (let suffixName of this.suffix) {
              suffixGather += ` .${suffixName} `; //指定的后缀集
            }
            this.$toast(`请上传后缀为：${suffixGather}的文件`);
            return check;
          }
        }
        // 文件大小校验
        if (file.size / 1024 > this.fileSize) {
          this.$toast(
            `${this.uploadType}的${
              this.fileTypeName
            }不能大于${this.utils.getfilesize(this.fileSize, "M")}M`
          );
          check = false;
          return check;
        }
      }
      return check;
    },
    // 文件选择回调
    handleInputChange(e) {
      const files = e.target.files;
      // console.log(files);
      // 文件校验
      if (!this.fileCheck(files)) return;
      // 是否上传
      if (!this.upload) {
        // 不上传，只获取文件
        this.successFn(files);
      } else {
        // 获取七牛云 UploadToken
        this.http.get("/UploadToken", {}, false, true).then(res => {
          if (res.status === 200) {
            this.uptoken = res.data.data.token;
            this.uploadInfo = res.data.data;
            // 上传文件
            let filesArr = [];
            for (let file of files) {
              let param = {
                file: file,
                domain: this.uploadInfo.domain,
                token: this.uptoken,
                isFile: this.fileType !== "img",
                onError: error => {
                  this.$toast("文件上传失败，请刷新页面后重试");
                  this.errorFn(error);
                  return;
                },
                onSuccess: path => {
                  filesArr.push(path);
                  if (filesArr.length == files.length) {
                    this.successFn(filesArr);
                  }
                }
              };
              QiniuUpload(param);
            }
          } else {
            this.$toast(res.message);
          }
        });
      }
    }
  }
};
</script>
<style lang="less" scoped>
.fileAccess {
  .up-input {
    display: none;
  }
}
</style>
